<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>插槽</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--
    1）定义一个组件 大的，template 里面放置<slot>插件标签
    2）定义组件，设置模板
    3）定义组件的名称 和 大的组件中的<slot>的name属性绑定
    4）div里面写自定义组件的标签
    5）slot属性绑定 大的组件中<slot>的name值 和 定义组件的名称，三者统一
    6）绑定Vue对象data里面的值 给模板中使用。
-->
<div id="app">
  <todo>
    <!--
        slot：绑定插槽和组件，三者统一。

        :title="titleData"
            -- :            v-bind简写。
            -- title        插槽组件中的名称。
            -- titleData    Vue对象中data里面的值。
    -->
    <todo-title slot="todo-title" :title="titleData"></todo-title>
    <todo-item slot="todo-item" v-for="item in itemsData" :item="item"></todo-item>
  </todo>
</div>
</body>
<!--
    组件必须定义在Vue对象的上面！！！
    插槽定义：在组件中 使用插槽标签，并用name值标记 作用是绑定下面的组件。
-->
<script>
  // 插槽他是一个组件，所以在组件中使用。
  // 组件必须定义在Vue对象的上面！！！
  Vue.component("todo", {
    /*
        \：换行符。等同于用 + 号拼接。

        用插槽name值 绑定下面组件的名称。
    */
    template:
      '<div>\
          <slot name="todo-title"></slot>\
          <ul>\
              <slot name="todo-item"></slot>\
          </ul>\
      </div>'
  })

  // 绑定插槽
  Vue.component("todo-title", {
    props: ['title'],
    template: '<div>{{title}}</div>'
  })

  // 绑定插槽
  Vue.component("todo-item", {
    props: ['item'],
    template: '<li>{{item}}</li>'
  })

  var vm = new Vue({
    el: "#app",
    data: {
      titleData: "这是标题",
      itemsData: ['Java', 'Web', 'Linux']
    }
  })
</script>
</html>